import React, { FC } from 'react'
import { Typography, Space, Button, Checkbox, Form, Input, message } from 'antd'
import { Link, useNavigate } from 'react-router-dom'
import { useRequest } from 'ahooks'
import { UserAddOutlined } from '@ant-design/icons'
import { registerServices } from '../../services/user'
import { LOGIN_PATHNAME } from '../../router'
import styles from './Register.module.scss'

type FieldType = {
    username?: string
    password?: string
    confirm?: string
    remember?: string
    nickname?: string
}

const { Title } = Typography

const Register: FC = () => {
    const nav = useNavigate()
    const { run } = useRequest(
        async values => {
            const { username, password, nickname } = values
            await registerServices(username, password, nickname)
        },
        {
            manual: true,
            onSuccess() {
                message.success('注册成功')
                nav(LOGIN_PATHNAME)
            },
        }
    )
    const onFinishHandler = (values: any) => {
        console.log('success', values)
        run(values)
    }
    const onFinishFailedHandler = () => {
        console.log('failed')
    }
    return (
        <div className={styles.container}>
            <div>
                <Space>
                    <Title level={2}>
                        <UserAddOutlined />
                    </Title>
                    <Title level={2}>注册新用户</Title>
                </Space>
            </div>
            <div>
                <Form
                    name="basic"
                    labelCol={{ span: 7 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinishHandler}
                    onFinishFailed={onFinishFailedHandler}
                    autoComplete="off"
                >
                    <Form.Item<FieldType>
                        label="用户名"
                        name="username"
                        rules={[
                            { required: true, message: '请输入你的用户名!' },
                            { type: 'string', min: 5, max: 20, message: '字符长度在5 ~ 20之间!' },
                            { pattern: /^\w+$/, message: '只能是字符数字下划线!' },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item<FieldType>
                        label="密码"
                        name="password"
                        rules={[{ required: true, message: '请输入密码!' }]}
                    >
                        <Input.Password />
                    </Form.Item>
                    <Form.Item<FieldType>
                        label="确认密码"
                        name="confirm"
                        dependencies={['password']} // 依赖于password的变化，password变化会重新出发validator验证
                        rules={[
                            { required: true, message: '请确认密码!' },
                            ({ getFieldValue }) => ({
                                validator(_, value) {
                                    if (!value || getFieldValue('password') === value) {
                                        return Promise.resolve()
                                    } else {
                                        return Promise.reject('两次密码输入的不一致，请检查')
                                    }
                                },
                            }),
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>
                    <Form.Item<FieldType> label="昵称" name="nickname">
                        <Input />
                    </Form.Item>
                    <Form.Item<FieldType>
                        name="remember"
                        valuePropName="checked"
                        wrapperCol={{ offset: 6, span: 16 }}
                    >
                        <Checkbox>记住我</Checkbox>
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
                        <Space>
                            <Button type="primary" htmlType="submit">
                                注册
                            </Button>
                            <Link to={LOGIN_PATHNAME}>已有账号，登录</Link>
                        </Space>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}

export default Register
